const Button = (props) => {
  const {
    type,
    radius,
    size,
    title,
    disabled,
    onClick = () => { },
    className } = props;
  let style = {
    display: 'block',
    overflow: 'hidden',
    width: '100%',
    margin: '1rem auto',
  };
  style.color = 'white';
  switch (type) {
    case 'normal':
      style.backgroundColor = '#4169E1'
      break;
    case 'warning':
      style.backgroundColor = '#FF7F50'
      break;
    case 'error':
      style.backgroundColor = 'red'
      break;
    default:
      style.backgroundColor = '#4169E1'
      break;
  }
  radius && (style.borderRadius = '1.2rem')
  switch (size) {
    case 'large':
      style.width = '70%';
      style.height = '4rem'
      break;
    case 'medium':
      style.width = '3rem'
      style.height = '1.5rem'
      break;
    case 'mini':
      style.width = '0.5rem'
      style.height = '0.25rem'
      break;
    default:
      style.width = '3rem'
      style.height = '1.5rem'
      break;
  }
  return <button
    disabled={disabled}
    onClick={onClick}
    className={className}
    style={style}>
    {title}</button>
}
export default Button;